<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://yslp.qq.com/js/core/jquery.js"></script>
<title>slide</title>
<style>
.clearfix{zoom:1;}
.clearfix:after{content:'.'; display:block; font-size:0; height:0; visibility:hidden; clear:both; line-height:0;}
li{list-style-image:none;list-style-position: outside;list-style-type:none;}
.slide{width:400px; height:250px; border:1px solid #ccc; position:relative; overflow:hidden; margin:20px auto;}
.slide .b_l, .slide .b_r{width:40px; height:40px; background-color:#555; position:absolute; top:50%; margin-top:-20px; display:block;}
.slide .b_l{left:10px;}
.slide .b_r{right:10px;}
.slide ul{height:100%; position:absolute; left:0; top:0;}
.slide li{width:400px; height:100%; float:left;}
.slide .dots{position:absolute; bottom:10px; left:0; width:100%; text-align:center;}
.slide .dots a{display:inline-block; width:6px; height:6px; border-radius:6px; background-color:#555; margin:0 5px;}
.slide .dots a.current{background-color:red;}
</style>
</head>
<body>
<div class="slide">
	<ul class="clearfix">
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>
	<a href="javascript:void(0);" class="b_l"></a>
	<a href="javascript:void(0);" class="b_r"></a>
	<div class="dots"><a href="javascript:void(0);" class="current"></a><a href="javascript:void(0);"></a><a href="javascript:void(0);"></a><a href="javascript:void(0);"></a></div>
</div>
<script type="text/javascript">
$(function(){
	var $slide = $('.slide');
	var $slide_ul = $slide.find('ul');
	var $slide_li = $slide.find('li');
	var $slide_l = $slide.find('.b_l');
	var $slide_r = $slide.find('.b_r');
	var $a = $('.dots a');


	var firstLi = $slide_li.first().clone();
	$slide_ul.append(firstLi)  // 拷贝 第一个 li dom 放到ul里面


	$slide_ul.width(($slide_li.length + 1 ) * $slide_li.width()) // 给ul 添加宽度
	// console.log($slide_ul.width())
	var imgW = $slide_li.width();
	var i = 0;
	var $length = $slide_li.length + 1;
	// console.log($length)

	$slide_r.click(function(){
		i ++;
		// console.log(i)
		if (i == $length - 1) {
			$slide_ul.stop().animate({ //判断是最后一个li时，无缝连接到第一个
				left: -i * imgW +'px'
			},function(){
				$slide_ul.css({
					left: 0
				})
			})
			i =0;
		}else{
			$slide_ul.stop().animate({
				left:-i * imgW + 'px'
			})
		}
		$a.eq(i).addClass('current').siblings().removeClass('current');

	})
	$slide_l.click(function(){
		i --;
		// console.log(i)
		if (i < 0) {
			$slide_ul.css({
				left:  -($length- 1) * imgW + 'px' //判断是第一个li时，无缝连接到最后一个
			})
			$slide_ul.stop().animate({
				left:  -($length - 2) * imgW + 'px'
			})
			i = $length - 2;
		}else{
			$slide_ul.stop().animate({
				left:-i * imgW + 'px'
			})
		}
		$a.eq(i).addClass('current').siblings().removeClass('current');

	})

	
});
</script>
</body>
</html>